<template>
  <div>
    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">字段标识</div>
          </el-col>
          <el-col :span="18">
            <select-model :model.sync="store.current.model"></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">是否隐藏</div>
          </el-col>
          <el-col :span="18">
            <el-switch
              v-model="store.current.options.hidden"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">class</div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.className"
              placeholder="label"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">背景颜色</div>
          </el-col>
          <el-col :span="2">
            <colorPicker v-model="store.current.options.backgroundColor" />
          </el-col>
          <el-col :span="16">
            <el-input
              v-model.number="store.current.options.backgroundColor"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">圆角</div>
          </el-col>
          <el-col :span="18">
            <el-slider v-model="store.current.options.borderRadius"></el-slider>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">上边距</div>
          </el-col>
          <el-col :span="18">
            <el-slider v-model="store.current.options.marginTop"></el-slider>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">右边距</div>
          </el-col>
          <el-col :span="18">
            <el-slider v-model="store.current.options.marginRight"></el-slider>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">下边距</div>
          </el-col>
          <el-col :span="18">
            <el-slider v-model="store.current.options.marginBottom"></el-slider>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">下边距</div>
          </el-col>
          <el-col :span="18">
            <el-slider v-model="store.current.options.marginLeft"></el-slider>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="容器属性" name="second">
        <div class="box-model-config">
          <div class="title">内填充</div>
          <div class="configuration">
            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">上</div>
              </el-col>
              <el-col :span="16">
                <el-slider
                  v-model="store.current.boxModelStyle.paddingTop"
                ></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{ store.current.boxModelStyle.paddingTop + "px" }}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">右</div>
              </el-col>
              <el-col :span="16">
                <el-slider
                  v-model="store.current.boxModelStyle.paddingRight"
                ></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{ store.current.boxModelStyle.paddingRight + "px" }}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">下</div>
              </el-col>
              <el-col :span="16">
                <el-slider
                  v-model="store.current.boxModelStyle.paddingBottom"
                ></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{ store.current.boxModelStyle.paddingBottom + "px" }}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">左</div>
              </el-col>
              <el-col :span="16">
                <el-slider
                  v-model="store.current.boxModelStyle.paddingLeft"
                ></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{ store.current.boxModelStyle.paddingLeft + "px" }}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import clone from "clone";
export default {
  inject: ["getStore"],
  data() {
    return {
      active: "first",
    };
  },
  watch: {
    "store.current.options": {
      handler() {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.$handleStack.push(clone(this.store.root));
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  computed: {
    store() {
      return this.getStore();
    },
  },
};
</script>

<style  scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
>>> .m-colorPicker .box {
  position: fixed !important;
}
</style>